App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-top-bar", {
        getDomObj: function () {
            this.attachDom("header", "header")
                .attachDom("h1", "textDom")
                .attachEvent("header", "iconclick", this.clickHandler, false);
        },
        clickHandler: function (ev) {
            var component = ev.detail.component;
            switch (component.id) {
                case "nav":
                    this.dispatchCustomEvent("navclick", {
                        event: ev.detail.event,
                        component: component
                    });
                    break;
                case "overflow": 
                    this.dispatchCustomEvent("overflowclick", {
                        event: ev.detail.event,
                        component: component
                    });
                    break;
                default: 
                    this.dispatchCustomEvent("actionclick", {
                        event: ev.detail.event,
                        component: ev.detail.component,
                        action: ev.detail.component.icon
                    });
            }
        },
        render: function (next) {
            this.computeData();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        computeActions: function (actions) {
            if (!actions) return [];
            var result = [];
            var actionList = actions.split(/\s+/);
            for (var i = 0; i < actionList.length; i++) {
                result.push({ icon: actionList[i] });
            }
            return result;
        },
        computeData: function () {
            var property = this.property;
            property.actions = this.computeActions(property.actions);
            property.navicon = property.navicon || "";
            if (typeof property.overflow !== "undefined") {
                property.overflow = property.overflow || "dots-vertical";
            }
            property.size = property.size || "normal";
            property.text = property.text || "默认标题名";
            property.class = property.class || "";
            this.data.propertystr = this.createPropertyStr(null, ["actions"]);
        },
        get size() {
            return this.property.size;
        },
        set size(value) {
            value = value || "normal";
            if (value === this.property.size) return;
            this.domList.header.setAttribute("size", value);
            this.property.size = value;
        },
        set overflow(value) {
            value = value || "dots-vertical";
            if (value === this.property.overflow) return;
            if (this.property.overflow) {
                var component = this.getComponentById("overflow");
                component.icon = value;
            }
            else {
                this.insertAdjacentHTML(this.domList.header, 
                    '<str-icon id="overflow" class="ripple bar-icon-overflow" icon="' + value+ '" width="24" height="24" nofocus></str-icon>', "beforeend");
            }
            this.property.overflow = value;
        },
        removeOverflow: function () {
            if (!this.property.overflow) return;
            this.property.overflow = "";
            var component = this.getComponentById("overflow");
            this.removeComponent(component);
        },
        get overflow() {
            return this.property.overflow;
        },
        set actions(value) {
            if (!Array.isArray(value)) {
                value = this.computeActions(value);
            }
            if (value.length > 0) {
                if (this.property.actions.length == 0) {
                    var html = this.renderHTML('<ul class="bar-icon-group">{{each act as actions}}<li><str-icon class="ripple" icon="{{act.icon}}" width="24" height="24" nofocus></str-icon></li>{{/each}}</ul>', { actions: value });
                    this.insertAdjacentHTML(this.domList.textDom, html, "afterend");
                }
                else {
                    var ul = this.domList.header.querySelector("ul");
                    var html = this.renderHTML('{{each act as actions}}<li><str-icon class="ripple" icon="{{act.icon}}" width="24" height="24" nofocus></str-icon></li>{{/each}}', { actions: value });
                    this.innerHTML(ul, html);
                }
            }
            this.property.actions = value;
        },
        get actions() {
            return this.property.actions;
        },
        set text(value) {
            if (value === this.property.text) return;
            this.domList.textDom.textContent = value;
            this.property.text = value;
        },
        get text() {
            return this.property.text;
        },
        set navicon(value) {
            var property = this.property, header = this.domList.header;
            if (property.navicon === value) return;
            if (property.navicon) {
                var component = this.getComponentById("nav");
                if (value) {
                    component.icon = value;
                }
                else {
                    header.classList.remove("str-bar-menu");
                    this.removeComponent(component);
                }
            }
            else {
                header.classList.add("str-bar-menu");
                this.insertAdjacentHTML(header, '<str-icon id="nav" class="ripple bar-icon-nav" icon="' + value + '"  width="24" height="24" nofocus></str-icon>', "afterbegin");
            }
            property.navicon = value;
        },
        get navicon() {
            return this.property.navicon;
        }
    });
});